<template>
    <el-dialog title="详情" :visible.sync="dialogVisible" :close-on-click-modal="false" @open="btnDisabled=false"
               @close="handleClose">
        <el-form label-width="100px" :model="form" ref="form" :rules="rules" class="dlg-form"
                 label-position="right">
            <el-form-item label="用户账号:" prop="userCode">
                <el-input v-model="form.userCode" :disabled="disabled"/>
            </el-form-item>
            <el-form-item label="姓名:" prop="userName">
                <el-input v-model="form.userName" :disabled="disabled"/>
            </el-form-item>
            <el-form-item label="手机号:" prop="phone">
                <el-input v-model="form.phone" :disabled="disabled"/>
            </el-form-item>
            <el-form-item label="身份证号码:" prop="idNumber">
                <el-input v-model="form.idNumber" :disabled="disabled"/>
            </el-form-item>
            <el-form-item label="邮箱:" prop="email">
                <el-input v-model="form.email" :disabled="disabled"/>
            </el-form-item>
            <el-form-item label="所属系统:" prop="sysCode">
                <sys-select v-model="form.sysCode" :disabled="disabled"/>
            </el-form-item>
            <el-form-item label="是否启用:" prop="isShow">
                <el-radio v-model="form.isValid" :label="true" :disabled="disabled">是</el-radio>
                <el-radio v-model="form.isValid" :label="false" :disabled="disabled">否</el-radio>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <template v-if="disabled">
                <el-button @click="dialogVisible = false">关闭</el-button>
            </template>
            <template v-else>
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleSubmit('form')" :disabled="btnDisabled">确 定</el-button>
            </template>
        </div>
    </el-dialog>
</template>
<script>

  import {validateId,validatePhone} from '../../../components/common/validation/validation'
  import SysSelect from '../../../components/sys/SysSelect'

  export default {
    components: {SysSelect},
    name: 'user-dialog',
    props: {
      pk: {
        type: String,
        required: true
      },
      value: {
        type: Boolean,
        required: true
      },
      disabled: {
        type: Boolean,
        required: true
      }
    },
    watch: {
      value: function () {
        console.log('watch')
        this.dialogVisible = this.value
        if (this.pk) {//修改
          this.form = {
            userId: this.pk
          }
          this.getData()
        } else {//新增
          this.handleNew()
        }
      }
    },
    created () {
      console.log('created')
      this.dialogVisible = false
    },
    data () {
      return {
        dialogVisible: false,
        btnDisabled: false,
        userTypeDisabled:false,
        data: [],
        form: {
            userId:'',
            isShow:false
        },
        rules: {
          userCode: [
            {required: true, message: '请输入用户账号', trigger: 'blur'},
            {max: 50, message: '长度不能超过25个字', trigger: 'blur'}
          ],
          userName: [
            {required: true, message: '请输入姓名', trigger: 'blur'},
            {max: 50, message: '长度不能超过50个字符', trigger: 'blur'}
          ],
          // idNumber: [
          //   {validator: validateId, trigger: 'blur'}
          // ],
          phone: [
            {required: true, message: '请输入手机号', trigger: 'blur'},
            {validator: validatePhone, trigger: 'blur'}
          ],
          sysCode: [
            {required: true, message: '请选择所属系统', trigger: 'blur'},
          ],
        },
        config: {
          initialFrameWidth: null,
          initialFrameHeight: 350
        },
      }
    },
    methods: {
      getData () {
        let self = this
        self.$axios
          .post('userAction/findById', {
            id: self.form.userId
          })
          .then(function (res) {
            self.form = res.data
            self.userTypeDisabled= true
          })
      },
      handleNew () {
        let self = this
        self.$axios
          .post('commonRest/getNewId')
          .then((res) => {
            self.form = {
              userId: 'new' + res.data
            }
            self.userTypeDisabled=false
          })
      },
      handleClose (value) {
        this.$emit('input', this.dialogVisible)
        this.$emit('close')
      },
      handleSubmit (formName) {
        let self = this
        self.btnDisabled = true
        self.$refs[formName].validate((valid) => {
          if (valid) {
            self.$axios
              .post('userAction/save', self.form)
              .then(function (res) {
                if (res.data.result) {
                  self.$message({
                    message: '保存成功',
                    type: 'success'
                  })
                  self.dialogVisible = false
                } else {
                  self.btnDisabled = false
                  self.$message.error(res.data.msg)
                }
              })
          } else {
            console.log('error submit!!')
            self.btnDisabled = false
            return false
          }
        })
      },
    }
  }

</script>
<style>
    .area_code .el-cascader{
        width:384px;
    }
</style>